<template>
  <div>

    <select v-model="proId" @change="change()">
      <option v-for="p in proArray" :key="p.id" :value="p.id">{{ p.name }}</option>
    </select>

    <select>
      <option v-for="c in checkCityArray" :key="c.id">{{ c.name }}</option>
    </select>


  </div>
</template>

<script>
export default {
  data() {
    return {
      proArray: [{id: 1, name: "四川省"}, {id: 2, name: "湖北省"}, {id: 3, name: "广东省"}],
      cityArray: [{id: 1, name: "成都市", proId: 1}, {id: 2, name: "内江市", proId: 1}, {id: 3, name: "绵阳市", proId: 1},
        {id: 4, name: "武汉市", proId: 2}, {id: 5, name: "黄石市", proId: 2}, {id: 6, name: "孝感市", proId: 2},
        {id: 7, name: "深圳市", proId: 3}, {id: 8, name: "广州市", proId: 3}, {id: 9, name: "湛江市", proId: 3},],

      proId: 1,
      checkCityArray: [{id: 1, name: "成都市", proId: 1}, {id: 2, name: "内江市", proId: 1}, {id: 3, name: "绵阳市", proId: 1}],
    }
  },
  methods: {
    change() {
      this.checkCityArray = this.cityArray.filter(n => n.proId == this.proId)
    }
  }
}

</script>

<style scoped>

</style>